<template>
	<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" @open="onOpen" @close="onClose">
		<el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
			<el-form-item label="设备ID：" prop="equipmentBasicId">
				<el-input v-model="form.equipmentBasicId" :disabled="isEdit"></el-input>
			</el-form-item>
			<el-form-item label="设备类型编号：" prop="equipmentTypeId">
				<el-input v-model="form.equipmentTypeId"></el-input>
			</el-form-item>
			<el-form-item label="设备名称：" prop="equipmentName">
				<el-input v-model="form.equipmentName"></el-input>
			</el-form-item>
			<el-form-item label="设备编号：" prop="equipmentNo">
				<el-input v-model="form.equipmentNo"></el-input>
			</el-form-item>
			<el-form-item label="设备状态：" prop="equipmentStatus">
				<el-select v-model="form.equipmentStatus">
					<el-option v-for="item in statusOptions" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="借用流程日志ID：" prop="borrowFlowLogId">
				<el-input v-model="form.borrowFlowLogId"></el-input>
			</el-form-item>
			<el-form-item label="最后借用日期：" prop="lastBorrowDate">
				<el-date-picker v-model="form.lastBorrowDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
			</el-form-item>
			<el-form-item label="预计归还日期：" prop="lastPlannedReturnDate">
				<el-date-picker v-model="form.lastPlannedReturnDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
			</el-form-item>
			<el-form-item label="设备图片：" prop="equipmentImages">
				<el-input v-model="form.equipmentImages"></el-input>
			</el-form-item>
			<el-form-item label="使用说明：" prop="usageInstructions">
				<el-input v-model="form.usageInstructions" type="textarea" :rows="3"></el-input>
			</el-form-item>
			<el-form-item label="用户手册：" prop="userManual">
				<el-input v-model="form.userManual"></el-input>
			</el-form-item>
			<el-form-item label="备注：">
				<el-input v-model="form.remarks" type="textarea" :rows="3"></el-input>
			</el-form-item>
			<el-form-item label="排序：" prop="sortIndex">
				<el-input v-model="form.sortIndex"></el-input>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import axios from 'axios';
	export default {
		name: 'EditType',
		props: {
			title: {
				type: String,
				default: '编辑设备'
			},
			form: {
				type: Object,
				required: true
			},
			formLabelWidth: {
				type: String,
				default: '120px'
			},
			isEdit: {
				type: Boolean,
				default: false
			},
			editDialogVisible: Boolean
		},
		data() {
			return {
				dialogVisible: false,
				loading: false,
				rules: {
					equipmentBasicId: [{
						required: true,
						message: '请输入设备ID',
						trigger: 'blur'
					}],
					equipmentTypeId: [{
						required: true,
						message: '请输入设备类型编号',
						trigger: 'blur'
					}],
					equipmentName: [{
						required: true,
						message: '请输入设备名称',
						trigger: 'blur'
					}],
					equipmentNo: [{
						required: true,
						message: '请输入设备编号',
						trigger: 'blur'
					}],
					equipmentStatus: [{
						required: true,
						message: '请选择设备状态',
						trigger: 'blur'
					}],
					borrowFlowLogId: [{
						required: true,
						message: '请输入借用流程日志ID',
						trigger: 'blur'
					}],
					lastBorrowDate: [{
						required: true,
						message: '请选择最后借用日期',
						trigger: 'blur'
					}],
					lastPlannedReturnDate: [{
						required: true,
						message: '请选择预计归还日期',
						trigger: 'blur'
					}],
					equipmentImages: [{
						required: true,
						message: '请输入设备图片',
						trigger: 'blur'
					}],
					usageInstructions: [{
						required: true,
						message: '请输入使用说明',
						trigger: 'blur'
					}],
					userManual: [{
						required: true,
						message: '请输入用户手册',
						trigger: 'blur'
					}]
				},
				statusOptions: [
					{
						value: '0',
						label: '正常'
					},
					{
						value: '1',
						label: '维修'
					},
					{
						value: '2',
						label: '报废'
					}
				]
			};
		},
		computed: {
			dialogTitle() {
				return this.isEdit ? '编辑设备' : '添加设备';
			}
		},
		methods: {
			onOpen() {
				// 对话框打开时的操作
			},
			onClose() {
				// 对话框关闭时的操作
				this.$refs.formRef.resetFields();
				this.$emit('update:editDialogVisible', false);
			},
			submitForm() {
				this.$refs.formRef.validate((valid) => {
					if (valid) {
						let url = '';
						if (this.isEdit) {
							url = 'http://localhost:8080/equipBasic/edit';
						} else {
							url = 'http://localhost:8080/equipBasic/addNew';
						}
						this.loading = true;
						axios.post(url, this.form)
							.then(response => {
								this.loading = false;
								if (response.data.code == 200) {
									this.$message({
										type: 'success',
										message: response.data.message
									});
									this.onClose();
								} else {
									this.$message({
										type: 'error',
										message: response.data.message
									});
								}
							})
							.catch(error => {
								this.loading = false;
								this.$message({
									type: 'info',
									message: '操作失败'
								});
							});
					} else {
						this.$message.error('表单验证失败，请检查输入');
					}
				});
			}
		},
		watch: {
			form: {
				handler(newVal) {
					// 当传入的表单数据发生变化时，更新内部的弹窗显示状态
					if (newVal) {
						this.dialogVisible = true;
					}
				},
				deep: true
			}
		}
	};
</script>